<template>
  <div class="bgc-default pad-20">
    <!-- 平台类型 -->
    <third-platform-head :showKuaiShouIcon="false"
      :showTaoBaoIcon="false"
      :showPinDuoDuoIcon="false"
      :showTmallIcon="false"
      @platformTypeChange="platformTypeChange">
    </third-platform-head>
    
    <div class="bg-color-white pad-l-20 pad-r-20 pad-t-20 mar-t-10">
      <!--顶部搜索 -->
      <div class="top-operate-default">
        <div class="search-item">
          <label>搜索品牌：</label>
          <el-input style="width: 200px" v-model="searchListQuery.chineseName" placeholder="请输入品牌名称"></el-input>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <div class="mar-t-15">
        <el-select v-model="shopId" placeholder="所属店铺" style="width:150px">
          <el-option v-for="item in shopList" :key="item.shopId" :label="item.shopName" :value="item.shopId">
          </el-option>
        </el-select>
        <el-button type="primary" class="mar-l--5" @click="syncBrand">同步品牌</el-button>
      </div>
      <!-- 内容列表 -->
      <div class="table-container mar-t-15">
        <el-table ref="multipleTable" :data="dataList" v-loading="listLoading" @selection-change="handleSelectionChange" element-loading-text="加载中">
          <el-table-column width="55px" type="selection"></el-table-column>
          <el-table-column width="280px" label="品牌名称" fixed="left">
            <template slot-scope="scope">
              <span>{{ scope.row.chineseName }}</span><br/>
              <span>{{ scope.row.englishName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商标注册号" prop="regNum"></el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import thirdAuth from '../components/third-auth'
  import thirdPlatformHead from '../components/third-platform-head'
  import { listThirdShop } from '@/api/user/third-shop'
  import { pageThirdBrand, syncBrand } from '@/api/goods/third-brand'
  export default {
    components: { thirdPlatformHead },
    mixins: [thirdAuth],
    data() {
      return {
        // 查询条件
        searchListQuery: {
          currentPage: 1,
          size: 10,
          chineseName: '',
          updateStatus: ''
        },
        // 平台类型
        platformType: 1,
        // 店铺id
        shopId: '',
        listLoading: false,
        total: 0,
        // 店铺集合
        shopList: [],
        // 品牌集合
        dataList: [],
        multipleSelection: []
      }
    },
    // 初始化页面
    created() {
      this.initListThirdShop()
    },
    mounted() {
    },
    methods: {
      // 平台类型切换事件
      platformTypeChange(platformType) {
        this.platformType = platformType
        this.initListThirdShop()
      },
      // 获取第三方店铺列表
      initListThirdShop() {
        const params = {
          enterpriseId: this.getEnterpriseId(),
          memberId: this.getMemberId(),
          platformType: this.platformType
        }
        listThirdShop(params).then(response => {
          if (response.isError) return
          if (response.data) {
            this.shopId = response.data[0] && response.data[0].shopId
            this.shopList = response.data
          }
          this.init()
        })
      },
      // 获取品牌列表
      init() {
        this.searchListQuery.shopId = this.shopId
        this.searchListQuery.platformType = this.platformType
        pageThirdBrand(this.searchListQuery).then(response => {
          if (response.isError) return
          this.listLoading = false
          this.total = response.data.total
          this.dataList = response.data.records
        })
      },
      // 查询事件
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.init()
      },
      // 重置事件
      resetSearch() {
        this.searchListQuery = {
          currentPage: 1,
          size: 10,
          chineseName: '',
          updateStatus: ''
        }
        this.init()
      },
      // 同步第三方品牌
      syncBrand() {
        const redirectUrl = '/#/' + (this.getMemberId() ? 'shop' : 'channel') + '/third-brand/index?platformType=' + this.platformType
        // 校验access_token是否存在
        this.checkAccessToken(this.platformType, this.shopId, redirectUrl, true).then(response => {
          if (response) {
            this.$confirm('下载数据量可能会比较大，需要耐心等候处理，确定下载？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const data = {
                shopId: this.shopId,
                memberId: this.getMemberId(),
                enterpriseId: this.getEnterpriseId(),
                platformType: this.platformType
              }
              syncBrand(data).then(response => {
                if (response.isError) return
                this.$message({ type: 'success', message: '成功!' })
                this.init()
              })
            }).catch(() => {
              this.$message({ type: 'info', message: '已取消' })
            })
          }
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-avatar {
    width: 90px;
    height: 90px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
</style>
